<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box{
            background: red;
        } */

    </style>
</head>
<body>
    <div 
        class="box" 
        style="background: red;"
    >
        <div>123</div>
    </div>
    <script>
        //一、 innerHTML :1. 获取 元素里的超文本  2.设置超文本
        // var ele = document.querySelector(".box");
        // // 获取
        // //  console.log(  ele.innerHTML);
        // // 设置 :覆盖元素里的内容
        // ele.innerHTML = "456";
        //二、 innerText :1获取文本 2.设置文本
        // var ele = document.querySelector(".box div");
        // 获取：只能获取文本
        // console.log(ele.innerText);
        // 设置：只能设置文本
        // ele.innerText = "<h1>456</h1>";
        // ele.innerHTML = "<h1>456</h1>";


        // 三、style :1.获取 （只能获取行间样式） 2.设置 ： 需要把 “-” 换成大写 font-size --- fontSize
        // var ele = document.querySelector(".box");
        // ele.style.background = "red";
        // console.log(ele.style.background);

        // 四、className ：1.获取类名  2.设置类名 :覆盖设置 
        // var ele = document.querySelector(".box");
        // console.log( ele.className);
        // ele.className += " active";

        // 五、和元素属性相关的几个函数
        // 1. 设置属性 元素.setAttribute("属性名","属性值");
        // var ele = document.querySelector(".box");
        // ele.setAttribute("myattr","myvalue");
        // 2.获取属性 元素.getAttribute("属性名");

        // var ele = document.querySelector(".box");
        // var res =  ele.getAttribute("class");
        // console.log(res);
        // 3.删除属性 元素.removeAttribute("属性名");
        var ele = document.querySelector(".box");
        ele.removeAttribute("id");

    </script>
</body>
</html>